<template>
    <div>
        <select>
            <option value="">请选择</option>
            <option :value="item.code" v-for="item in abc" :key="item.code">{{ item.name }}</option>
        </select>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>姓名</td>
                    <td>年龄</td>
                    <td>性别</td>
                    <td>地址</td>
                    <td>图片</td>
                    <td>生日</td>
                </tr>
                <tr v-for="item in data.list" :key="item.name">
                    <td>{{ item.name }}</td>
                    <td>{{ item.age }}</td>
                    <td>{{ item.gender ? "女" : "男" }}</td>
                    <td>{{ item.hometown }}</td>
                    <td><img :src="item.photo" width="100" /></td>
                    <td>{{ moment(item.birthday).format("YYYY-MM-DD HH:mm:ss") }}</td>
                </tr>
            </tbody>
        </table>


        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>姓名</td>
                    <td><input type="text" v-model="ggg.name"/></td>
                </tr>
                <tr>
                    <td>性别</td>
                    <td><input type="radio" name="sexx" value="男" v-model="ggg.sex"/>男
                        <input type="radio" name="sexx" value="女" v-model="ggg.sex"/>女
                    </td>
                </tr>
                <tr>
                    <td>职务</td>
                    <td><input type="checkbox" name="work" value="铁路服务员" v-model="ggg.work"/>铁路服务员
                        <input type="checkbox" name="work" value="工人" v-model="ggg.work"/>工人
                        <input type="checkbox" name="work" value="工程师" v-model="ggg.work"/>工程师
                    </td>
                </tr>
                <tr>
                    <td>地区</td>
                    <td><select v-model="ggg.abc">
                            <option value="">请选择</option>
                            <option :value="item.code" v-for="item in abc" :key="item.code">{{ item.name }}</option>
                        </select></td>
                </tr>
                <tr>
                    <td></td>
                    <td><input type="button" value="添加" @click="Add" /></td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import moment from 'moment';
let data = reactive({
    list: [
        {
            name: '张三',
            age: 16,
            gender: 0,
            hometown: '广东省',
            photo:
                'https://q3.itc.cn/q_70/images03/20240613/862cf9ebe25b4bbfb95bdf2a1bf1aec0.jpeg',
            birthday: '2004-09-20T11:32:09.244927'
        },
        {
            name: '李四',
            age: 17,
            gender: 1,
            hometown: '河北省',
            photo:
                'https://q3.itc.cn/q_70/images03/20240613/862cf9ebe25b4bbfb95bdf2a1bf1aec0.jpeg',
            birthday: '2004-10-22T11:32:09.244927'
        },
        {
            name: '王五',
            age: 18,
            gender: 1,
            hometown: '福建省',
            photo:
                'https://q3.itc.cn/q_70/images03/20240613/862cf9ebe25b4bbfb95bdf2a1bf1aec0.jpeg',
            birthday: '2005-09-25T11:32:09.244927'
        },
        {
            name: '马六',
            age: 19,
            gender: 0,
            hometown: '河南省',
            photo:
                'https://q3.itc.cn/q_70/images03/20240613/862cf9ebe25b4bbfb95bdf2a1bf1aec0.jpeg',
            birthday: '2006-01-25T11:32:09.244927'
        },
    ]

})

let abc = ([
    { name: '北京市', code: '110000' },
    { name: '天津市', code: '120000' },
    { name: '河北省', code: '130000' },
    { name: '山西省', code: '140000' },
    { name: '内蒙古自治区', code: '150000' },
    { name: '辽宁省', code: '210000' },
    { name: '吉林省', code: '220000' },
    { name: '黑龙江省', code: '230000' },
    { name: '上海市', code: '310000' },
    { name: '江苏省', code: '320000' },
    { name: '浙江省', code: '330000' },
    { name: '安徽省', code: '340000' },
    { name: '福建省', code: '350000' },
    { name: '江西省', code: '360000' },
    { name: '山东省', code: '370000' },
    { name: '河南省', code: '410000' },
    { name: '广西壮族自治区', code: '450000' }
])
let ggg=reactive({

    name:'',
    sex:'男',
    work:[],
    abc:''
})
const Add=()=>{
    console.log(ggg);
}
</script>

<style scoped></style>